<template>
  <div class="splitPeriod">
    <van-nav-bar
      title="我要分期"
      right-text="分期明细"
    />
    <div class="container">
      <div class="title-wapper">
        <div>中国移动联名卡(9366)</div>
        <van-icon name="arrow" />
      </div>
      <div class="apply-money-wapper">
        <div class="title">申请分期金额</div>
        <div class="amount-wapper">
          <div class="input-wapper">
            <div class="symbol">￥</div>
            <input class="num" type="number" v-model="moneyValue" />
          </div>
          <div class="text">仅当分期</div>
        </div>
        <div class="subOption">
          <ul>
            <li class="content">包含已出账单12398.00</li>
          </ul>
        </div>
      </div>
      <div class="activite">
        <div class="activite-title-wapper">
          <div class="title">
            <span>您有</span>
            <span class="value">50000元</span>
            <span>放心分额度待领取</span>
          </div>
          <div class="subTitle">使用放心分，账单分期不占信用额度</div>
        </div>
        <div class="right-btn">
          <van-button round type="default" @click="quikcRePaymentHandle">立即申请</van-button>
        </div>
      </div>
      <div class="sub-options">
        <div class="options-one" @click="selectRePaymentPeriods">
          <div class="content">分期期数</div>
          <div class="right">
            <div class="date-value">{{curVal}}期</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="option-two">
          <div class="content">还款计划</div>
          <div class="right-wapper">
            <div class="repayment-desc">
              <div class="rePayment-value">首期应还448.56元</div>
              <div class="interest">含利息90.29元</div>
            </div>
            <div class="right-icon">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
      <div class="tips">
        温馨提示:
        <div>1.对于已出账单的交易，您可在账单日次日至最后还款日20点之间申请本业务。对于未出账单的交易，您可在交易发生日至对应账单日当日20点之间申请本业务。</div>
        <div>2.账单分期最低可转分期金额为200元，最高可转分期金额不超过已入账的消费总额（包括已出账单和未出账单)，具体以页面展示为准。</div>
        <div>3.账单分期金额优先冲抵已出账单可分期金额。</div>
        <div>4.办理分期前请仔细确认信息，一经提交并成功申请后无法修改期数及金额。</div>
      </div>
    </div>
    <feelingPicker v-model="showPicker" title=" " @confirm="confirmSelected" />
    <feelingFixedButton @click="nextPage">下一步</feelingFixedButton>
  </div>
</template>

<script>
import feelingFixedButton from "@/components/feelingFixedButton.vue";
import feelingPicker from "@/components/picker/index.vue";
export default {
  name: "splitPeriod",
  components: {
    feelingFixedButton,
    feelingPicker
  },
  data() {
    return {
      columns: ["12", "18", "24", "36"],
      moneyValue: "12898.00",
      showPicker: false,
      curVal: 36
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    nextPage() {
      this.openWithPanel();
      setTimeout(() => {
        this.$router.push("/splitPeriod/splitPeriodConfirm");
        this.hideWithPanel();
      }, 500);
    },
    selectRePaymentPeriods() {
      this.showPicker = !this.showPicker;
    },
    confirmSelected(value) {
      this.curVal = value;
      console.log("value", value);
    },
    quikcRePaymentHandle() {}
  }
};
</script>

<style lang='less' scoped>
.splitPeriod {
  height: 100vh;
  background-color: #edf0f9;
  .container {
    width: 100%;
    padding: 0.15rem 0.18rem 0rem 0.18rem;
    box-sizing: border-box;
    .title-wapper {
      display: flex;
      justify-content: space-between;
      height: 0.4rem;
      background-color: #fff;
      border-radius: 0.1rem;
      padding: 0.12rem;
      font-weight: 600;
      box-sizing: border-box;
    }
    .apply-money-wapper {
      padding: 0.12rem;
      border-radius: 0.1rem;
      background-color: #fff;

      margin-top: 0.1rem;
      box-sizing: border-box;
      .title {
        font-weight: 600;
      }
      .amount-wapper {
        display: flex;
        justify-content: space-between;
        .input-wapper {
          display: flex;
          align-items: center;
          color: #323232;
          align-items: center;
          margin: 0.15rem 0;
          width: 80%;
          .symbol {
            font-size: 0.26rem;
          }
          .num {
            display: inline-block;
            border: none;
            width: 80%;
            font-size: 0.3rem;
            font-weight: 700;
            padding: 0;
          }
        }
        .text {
          display: flex;
          align-items: center;
          color: #fa840c;
          flex: 1;
        }
      }
      .subOption {
        .content {
          padding-left: 0.12rem;
          box-sizing: border-box;
          color: #b1b1b1;
        }
      }
    }
    .activite {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0.15rem 0.12rem;
      height: 0.9rem;
      margin-top: 0.1rem;
      border-radius: 0.1rem;
      box-sizing: border-box;
      .activite-title-wapper {
        font-weight: 600;
        .value {
          color: #fa840c;
          font-size: 0.16rem;
        }
        overflow: hidden;
        .subTitle {
          margin-top: 0.1rem;
          font-weight: 500;
          font-size: 0.12rem;
          color: #a2a4a4;
        }
      }
      .right-btn {
        .van-button {
          height: 0.35rem;
          background-color: #ee0a24;
          color: #fff;
        }
      }
    }
    .sub-options {
      height: 0.95rem;
      background-color: #fff;
      padding: 0.06rem 0.12rem;
      font-weight: 600;
      box-sizing: border-box;
      border-radius: 0.1rem;
      margin-top: 0.1rem;
      .options-one,
      .option-two {
        height: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right {
          display: flex;
          .date-value {
            margin-right: 0.12rem;
          }
        }
        .content {
          font-size: 0.16rem;
        }
        .right-wapper {
          display: flex;
          align-items: center;
          .repayment-desc {
            margin-right: 0.14rem;
            .rePayment-value {
              font-size: 0.16rem;
            }
            .interest {
              font-size: 0.13rem;
              color: #aeaeae;
              font-weight: 500;
              text-align: right;
              margin-top: 0.02rem;
            }
          }
        }
      }
    }
    .tips {
      color: #b2b1b7;
      margin-top: 0.15rem;
      font-size: 0.13rem;
      div {
        margin-top: 0.02rem;
      }
    }
  }
}
</style>
